// 路由基本使用
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Link, Routes, Route, Outlet } from 'react-router-dom'

class Edu extends React.Component {
  render() {
    return (
      <div>
        <div>教育频道</div>
        <Link to="/edu/en">英语</Link>
        <Link to="/edu/cn">汉语</Link>

        {/* 路由填充位置 */}
        <Outlet />
      </div>
    )
  }
}

class Tech extends React.Component {
  render() {
    return <div>科技</div>
  }
}

class En extends React.Component {
  render() {
    return <div>英语频道</div>
  }
}

class Cn extends React.Component {
  render() {
    return <div>汉语频道</div>
  }
}

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <div>router-v6-基本使用</div>
          <hr />
          {/* 路由链接 */}
          <Link to="/edu">教育</Link>
          <Link to="/tech">科技</Link>

          {/* 路由映射，路由填充位 */}
          <Routes>
            <Route path="/edu" element={<Edu />}>
              <Route path="en" element={<En />} />
              <Route path="cn" element={<Cn />} />
            </Route>
            <Route path="/tech" element={<Tech />} />
          </Routes>
        </div>
      </BrowserRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
